import React from 'react';
import './TabLayout.css';

const CustomTabBar = ({ activeTab, onChange }) => {
  return (
    <div style={{
      position: 'fixed',
      bottom: '20px',
      left: '50%',
      transform: 'translateX(-50%)',
      zIndex: 1000,
      width: '280px',
      height: '60px'
    }}>
      <div style={{
        position: 'relative',
        width: '100%',
        height: '100%',
        background: '#ffffff',
        borderRadius: '30px',
        padding: '4px',
        boxShadow: '0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04)',
        overflow: 'hidden',
        border: '1px solid rgba(0, 0, 0, 0.06)',
        display: 'flex'
      }}>
        {/* 选中tab的背景 */}
        <div style={{
          position: 'absolute',
          top: '4px',
          left: activeTab === 'recommend' ? '4px' : 'calc(30% + 4px)',
          width: '70%',
          height: 'calc(100% - 8px)',
          background: activeTab === 'recommend' ? '#2c3e50' : '#2c3e50',
          borderRadius: '26px',
          transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06)',
          zIndex: 1
        }} />
        
        {/* 简洁分割线 */}
        <div style={{
          position: 'absolute',
          top: '25%',
          left: activeTab === 'recommend' ? '70%' : '30%',
          width: '1px',
          height: '50%',
          background: 'rgba(0,0,0,0.08)',
          borderRadius: '1px',
          transition: 'all 0.4s ease',
          zIndex: 2,
          opacity: 0.5
        }} />
        
        {/* 推荐按钮 */}
        <button
          onClick={() => onChange('recommend')}
          style={{
            position: 'absolute',
            top: '0',
            left: '0',
            width: activeTab === 'recommend' ? '70%' : '30%',
            height: '100%',
            border: 'none',
            background: 'transparent',
            color: activeTab === 'recommend' ? '#ffffff' : '#666',
            fontSize: activeTab === 'recommend' ? '15px' : '13px',
            fontWeight: '500',
            cursor: 'pointer',
            zIndex: 3,
            transition: 'all 0.3s ease',
            borderRadius: '26px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '6px',
            flexDirection: activeTab === 'recommend' ? 'row' : 'column'
          }}
        >
          <span style={{
            fontSize: '16px'
          }}>💼</span>
          <span style={{ fontSize: activeTab === 'recommend' ? '14px' : '11px' }}>推荐</span>
        </button>
        
        {/* 随机按钮 */}
        <button
          onClick={() => onChange('random')}
          style={{
            position: 'absolute',
            top: '0',
            right: '0',
            width: activeTab === 'random' ? '70%' : '30%',
            height: '100%',
            border: 'none',
            background: 'transparent',
            color: activeTab === 'random' ? '#ffffff' : '#666',
            fontSize: activeTab === 'random' ? '15px' : '13px',
            fontWeight: '500',
            cursor: 'pointer',
            zIndex: 3,
            transition: 'all 0.3s ease',
            borderRadius: '26px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexDirection: activeTab === 'random' ? 'row' : 'column',
            gap: activeTab === 'random' ? '6px' : '2px'
          }}
        >
          <span style={{
            fontSize: '16px'
          }}>🎯</span>
          <span style={{ fontSize: activeTab === 'random' ? '14px' : '11px' }}>随机</span>
        </button>
      </div>
    </div>
  );
};

export default CustomTabBar;